<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'typelist.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	  <style type="text/css">
		  a{
			  text-decoration: none;
			  color: #000000;
		  }
		  *{padding: 0; margin: 0;}
		  ul li{
			  list-style: none;
		  }
		  .bigBox{
			  position: fixed;
			  overflow: scroll;
		  }
		  .bigBox table{
			  width: 70vw;
			  text-align: center;
			  background-color: white;
			  margin: 20px 20px;
			  border: 1px solid white;
		  }
		  .bigBox table tr{
			  height: 40px;
			  font-weight: bold;
		  }
		  .bigBox input{
			  font-size: 20px;
		  }
		  button{
			  font-size: 20px;
			  padding: 8px 20px;
			  border-radius: 10px;
			  border: 2px solid #95d7e4;
			  background-color: #6c84a7;
		  }
		  .bigBox table tr:nth-child(even){
			  background-color: #d6d6d6;
		  }
		  .add{
			  border-radius: 20px;
			  color: white;
			  width: 440px; height: 260px;
			  background-color: #374866;
			  border: 1px solid #6c84a7;
			  text-align: center;
			  position: absolute;
			  top: 160px; left: 260px;
			  display: none;
		  }
		  .add li{
			  line-height: 80px;
		  }
		  .add input{
			  width: 280px; height: 50px;
			  padding-left: 10px;
			  border-radius: 10px;
		  }
	  </style>
	  <script src="/static/js/jquery-3.4.1.min.js"></script>
	  <script type="text/javascript">
		  $(function(){
			  $(".btnblock").click(function(){
				  $(".add").css("display","block");
			  });
			  $(".btnnone").click(function(){
				  $(".add").css("display","none");
			  });
			  $(".delete").click(function(){
				  var check = confirm("确认删除吗？");
				  if(check == true){
					  $(".firstform").attr("action","${pageContext.request.contextPath }/type/delAll");
				  }else{
					  $(".firstform").attr("action","${pageContext.request.contextPath }/type/list");
				  }
			  });
		  });

	  </script>
  </head>
  <body>
  <div class="bigBox">
	  一级分类列表
	  <form class="firstform" action="${pageContext.request.contextPath }/type/delAll" method="post">

		  <table>
			  <tr>
				  <td width="150px">全选框</td>
				  <td>一级分类名称</td>
				  <td>添加二级分类</td>
			  </tr>
			  <c:forEach items="${typelist }" var="typelist" varStatus="status">
				  <tr>
					  <td>
						  <input type="checkbox" name="ids" value="${typelist.id }" style="zoom:200%;"/>
						  <input type="hidden" name="typelist[${status.index }].id" value="${typelist.id }" />
						  <input type="hidden" name="typelist[${status.index }].fid" value="${typelist.fid }" />
					  </td>
					  <td>
						 ${typelist.typeName }
					  </td>
					  <td>
						  <!-- ${pageContext.request.contextPath }/type/typeEdit/${typelist.id} -->
						  <button type="button"><a href="${pageContext.request.contextPath }/type/typeEdit/${typelist.id}">添加</a></button>
					  </td>
				  </tr>
			  </c:forEach>
			  <tr>
				  <td><button class="btnblock" type="button">添加一级分类</button></td>
				  <td><button class="delete">批量删除</button></td>
				  <td></td>
			  </tr>
		  </table>
	  </form>
	  <div class="add">
		  <form action="${pageContext.request.contextPath }/type/addfirst" method="post">
			  <ul>
				  <li>一级分类添加</li>
				  <li><input type="text" name="typeName" /><br /></li>
				  <li><button class="btnnone">提交</button>&nbsp;<button class="btnnone" type="button">取消</button></li>
			  </ul>
		  </form>
	  </div>
  </div>
  </body>
</html>
